<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>watch</title>
    <script type="text/javascript" src="../assets/js/vue-2.3.0.js"></script>
</head>

<body>
    <h1>watch监控数据</h1>
    <hr>
    <div id="app">
        <p>今日温度：{{temperature}}°C</p>
        <p>穿衣建议：{{suggestion}}</p>
        <p>
            <button @click="reduce">降低温度</button>
            <button @click="add">增加温度</button>
        </p>
    </div>
</body>
<script type="text/javascript">
    var suggestion = ['T恤短袖', '夹克长裙', '棉衣羽绒服'];
    var app = new Vue({
        el: '#app',
        data: {
            temperature: 14,
            suggestion: '夹克长裙'
        },
        methods: {
            add: function () {
                this.temperature += 5
            },
            reduce: function () {
                this.temperature -= 5
            }
        },
        // watch: {
        //     temperature: function (newVal, oldVal) {
        //         if (newVal >= 26) {
        //             this.suggestion = suggestion[0];
        //         } else if (newVal < 26 && newVal >= 0) {
        //             this.suggestion = suggestion[1];
        //         } else {
        //             this.suggestion = suggestion[2];
        //         }
        //     }
        // }

    })
    //实例
    app.$watch('temperature', function (newVal, oldVal) {
        if (newVal >= 26) {
            this.suggestion = suggestion[0];
        } else if (newVal < 26 && newVal >= 0) {
            this.suggestion = suggestion[1];
        } else {
            this.suggestion = suggestion[2];
        }
    })
</script>

</html>